<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 3000px;
        /* 渐变背景 */
        background: linear-gradient(45deg, #f3ec78, #af4261);
      }
    </style>
  </head>
  <body>
    <script>
      // 监听滚动事件
      window.onscroll = throttle(showScroll, 300);

      // 节流
      function throttle(fn, delay) {
        // 定时器, 阀门
        let timer = null;
        // 返回一个函数
        return function () {
          // 如果定时器不存在
          if (!timer) {
            // 设置定时器
            timer = setTimeout(() => {
              // 执行函数
              fn();
              // 清除定时器
              timer = null;
            }, delay);
          }
        };
      }

      function showScroll() {
        var scrollTop = document.documentElement.scrollTop;
        console.log("滚动条位置：" + scrollTop);
      }
    </script>
  </body>
</html>
